<template>
  <div
  class="bg-[#1e1e1f] px-5 py-5 md:px-12 md:py-10 text-left border border-[#383838] rounded-3xl text-amber-50 mx-3 mb-5">
    <article>
      <header>
        <div class="text-2xl font-bold text-white mb-5 fadein-bot title-section flex items-center">
          Education &nbsp;
          <div class="h-[1px] w-32 bg-amber-200 md:w-96 aos-init aos-animate" data-aos="zoom-in-left"
            data-aos-duration="600"></div>
        </div>
      </header>
      <div class="fadein-up">
        <div class="mb-5">
          <section class="container mx-auto p-5 md:py-5 px-0 md:p-5 md:px-0">
            <section class="relative px-10 md:p-0 transform duration-500 hover:shadow-2xl cursor-pointer hover:-translate-y-1 ">
                <img class="xl:max-w-6xl" src="/img/baoding1.jpg" alt="">
                <div class="content bg-white p-2 pt-8 md:p-12 pb-12 lg:max-w-lg w-full lg:absolute top-48 right-5 opacity-75">
                    <div class="flex justify-between font-bold text-sm">
                        <p class="text-gray-700">{{educationExperiences.institution}}</p>
                        <p class="text-gray-400">{{educationExperiences.duration}}</p>
                    </div>
                    <h2 class="text-gray-900 text-3xl font-semibold mt-4 md:mt-10">{{educationExperiences.degree}}</h2>
                    <div class="font-mono my-3 text-justify font-medium text-gray-700 leading-relaxed">
                      <div class="flex justify-between">
                          <span class="text-gray-800">主修课程：</span>
                          <span class="text-right">GPA: 3.1/4.0</span>
                      </div>
                      <p class="mt-1">{{ educationExperiences.lessons }}</p>
                      <p class="mt-2">曾在各类竞赛中获得多次国、省级奖项，并获得多次单项奖学金</p>  
                    </div>
                    <button @click="scrollToTarget" class="mt-2 md:mt-5 p-3 px-5 bg-black text-white font-bold text-sm hover:bg-purple-800"> Learn More</button>
                </div>
            </section>
          </section>
        </div>
      </div>
    </article>

    <div id="target" class="px-5 py-5 md:px-12 md:py-10 text-left text-amber-50 mx-3">
      <article>
        <header>
            <div class="text-2xl font-bold text-white mb-5 fadein-bot title-section flex items-center">
                <div class="h-[1px] w-10 bg-amber-200 md:w-20 aos-init aos-animate" data-aos="zoom-in-left"
                      data-aos-duration="600"></div>
                &nbsp; Awards
            </div>
        </header>
      </article>
      <!-- 放一排奖项卡片横着排列 -->
      <div class="container mx-auto p-4">
        <div v-for="(row, rowIndex) in getRows(items)" :key="rowIndex" class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
          <div v-for="(item, colIndex) in row" :key="colIndex" class="p-6 rounded-lg shadow-md">
            <article class="p-5 transform duration-300 hover:-translate-y-1 cursor-pointer  hover:shadow-2xl group bg-[#1e1e1f] hover:bg-[#282828] border border-[#383838] rounded-xl">
              <div class="relative max-h-125 overflow-hidden">
                  <!-- <img class="absolute" :src="item.actualPhoto" alt=""> -->
                  <!-- <img class="relative transform duration-500 group-hover:opacity-0" :src="item.certification" alt=""> -->
                  <img class="relative transform duration-500" :src="item.certification" alt="">
              </div>
              <ul class="mt-6 font-semibold text-gray-200">
                <li class="bg-clip-text bg-gradient-to-r from-slate-100 to-amber-300 text-transparent">{{item.awardName}}</li>
                <li class="bg-clip-text bg-gradient-to-l from-slate-100 to-amber-300 text-transparent font-serif text-right">-- {{item.awardingInstitution}}</li>
              </ul>
              <p class="mt-6 text-base leading-relaxed text-gray-400">{{item.awardDescription}}</p>
              <p class="text-gray-300 mt-10 font-semibold">{{ item.awardDate }}</p>
            </article>
          </div>
        </div>
      </div>
    </div>
</div>
</template>

<script>
  import {toGetAwardInfos} from "../../../api/experience.js";
  import { ref, onMounted } from 'vue';

export default {
  name: 'EducationComponent',
  setup() {
    const educationExperiences = ref({
      degree: '物联网工程学士学位',
      institution: '保定学院  ',
      duration: 'From September, 2019 To June, 2023',
      lessons: "数据结构 操作系统 计算机网络 计算机组成原理 数据库设计 面向对象语言编程 网站设计与开发 软件工程等",
      details: [
        '主修课程包括数据结构、算法、数据库系统、操作系统、计算机网络等。',
        '在校期间多次获得奖学金，并参与了多个科研项目。',
        '担任学生会技术部部长，组织并参与多个技术讲座和比赛。',
        '毕业设计课题为“基于机器学习的图像分类系统”，获得优秀毕业设计奖。',
      ]
    });

    const items = ref([]);
    const rows = ref([]);

    const getRows = (array) => {
      const result = [];
      for (let i = 0; i < array.length; i += 3) {
        result.push(array.slice(i, i + 3));
      }
      return result;
    };

    const scrollToTarget = () => {
      document.getElementById('target').scrollIntoView({ behavior: 'smooth' });
    };

    onMounted(async () => {
      items.value = await toGetAwardInfos();
      rows.value = getRows(items.value);
    });

    return {
      educationExperiences,
      items,
      rows,
      getRows,
      scrollToTarget
    };
  }
};

</script>

<style>
.fadein-up {
  opacity: 0;
  animation: fadeInUp 0.5s ease-out forwards;
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.title-section {
  display: flex;
  align-items: center;
}
</style>
